<!--更新弹窗-->
<template>
  <div class="page">
    <div class="bg-mask"></div>
    <div class="bg">
      
      <div class="content-box" @click="defclick">
        <div class="content-level1">
          <div class="bg-top-box">
            <div class="bg-top">
              <div class="circle" style="width:35px;height:35px;left:11px;top:87px;border-radius:35px;"></div>
              <div class="circle" style="width:59px;height:59px;left:243px;top:114px;border-radius:59px;"></div>
              <div class="circle" style="width:16px;height:16px;left:318px;top:81px;border-radius:16px;"></div>
              <div class="circle" style="width:16px;height:16px;left:489px;top:85px;border-radius:16px;"></div>
              <LImage class="star" style="width:23px;height:30px;left:28px;top:11px;" :src="ICON.popup_image_yellowStar"></LImage>
              <LImage class="star" style="width:22px;height:29px;right:8px;top:9px;" :src="ICON.popup_image_yellowStar"></LImage>
              <LImage class="star" style="width:28px;height:37px;left:283px;top:29px;" :src="ICON.popup_image_writeStar"></LImage>
              <LImage class="star" style="width:15px;height:21px;left:369px;top:51px;" :src="ICON.popup_image_writeStar"></LImage>
              <LImage class="star" style="width:15px;height:21px;left:40px;top:164px;" :src="ICON.popup_image_writeStar"></LImage>
              <LImage class="star" style="width:27px;height:36px;left:438px;top:139px;" :src="ICON.popup_image_writeStar"></LImage>
            </div>
          </div>
          <div class="top-box">
            <text class="title">APP更新</text>
            <div  class="info-box">
              <text class="info-text">APP升级，请复制以下链接到浏览器下载更新</text>
              <text class="info-text">{{url}}</text>

              <div class="copy" @click="copyClick(url)">
                <text class="copy-text">复制</text>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import ICON from "@/_js/icon";
import modal from "@/_js/modal";
import navigator from "@/_js/navigator";
import jconfig from "@/_js/config";
const clipboard = weex.requireModule("clipboard");

var versionInfo = {};

export default {
  
  data() {
    return {
      ICON:ICON,
      index:1,
      tapHandler:undefined,

      url: jconfig.download,
    };
  },

  created(){
  },

  mounted() {
  },

  methods: {

    defclick(){
      this.index++;
      if(this.tapHandler){
        clearTimeout(this.tapHandler);
      }

      if(this.index>20){
        navigator.dismiss();
        return;
      }

      this.tapHandler = setTimeout(() => {
        this.index = 0;
      }, 500);
    },

    copyClick(url) {
      clipboard.setString(url);
      modal.toast(T('复制成功'));
    }
  }
};

</script>

<style scoped>
.page{
  width:750px;
  position:absolute;
  top:0;
  bottom: 0;
  left:0;
  right:0;
}
.bg-mask {
  width: 750px;
  position:absolute;
  top:0;
  bottom: 0;
  left:0;
  right:0;
  z-index: 1;

  background-color:rgba(0,0,0,1);
  opacity:0.4;
}
.bg{
  width: 750px;
  position:absolute;
  top:0;
  bottom: 0;
  left:0;
  right:0;
  z-index: 2;

  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.xiao-fu-jian{
  width:184px;
  height:224px;
  position: absolute;
  right:0;
  top:0;
  z-index: 6;
}

.content-box{
  width:540px;
  overflow:hidden;
}
.content-level1{
  width:540px;
  margin-top:44px;
  padding-bottom:165px;
  
  background-color:rgba(255,255,255,1);
  border-radius:10px;
  overflow:hidden;
}
.content-level2{
  width:540px;
  /* height:768px; */
  position: absolute;
  left:0;
  top:0;
  bottom:0;
  right:0;
  z-index:2;

  overflow:hidden;

  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.bg-top-box{
  width:1000px;
  height:1000px;
  position: absolute;
  left:-230px;
  top:-683px;
  border-bottom-left-radius: 500px;
  border-bottom-right-radius: 500px;
  /* background-color:rgb(70,147,243); */
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.bg-top{
  width:540px;
  height:317px;
  background-image:linear-gradient(to bottom right,rgba(70,147,243,1),rgba(47,53,219,1));
}

.circle{
  position:absolute;
  background-color:rgba(255,255,255,1);
  opacity:0.13;
}
.star{
  position:absolute;
}

.top-box{
  width:540px;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
}

.title{
  width:540px;
  text-align: center;
  margin-top:100px;
  font-size:42px;
  font-family:Noto Sans S Chinese;
  font-weight:500;
  color:rgba(253,250,249,1);
  text-shadow:0px 9px 10px rgba(113,103,247,0.48);
}
.version{
  width:540px;
  padding-left:60px;
  margin-top:15px;
  font-size:36px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(253,250,249,1);
  text-shadow:0px 9px 10px rgba(113,103,247,0.48);
}

.info-box{
  width:480px;
  min-height: 335px;
  margin-top:230px;
}
.info-text{
  width:480px;
  padding:10px 40px; 
  /* height: 335px; */
  text-align: left;
  font-size:30px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(50,55,60,1);
  /* background-color:rgba(255,255,255,1); */
  /* box-shadow: 0 0 20px 0px rgba(0,0,0,0.2); */
  border-radius:10px;
}

.copy {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 80px;
  border-radius: 40px;
  background-color: blue;

  margin-top: 40px;
}
.copy-text {
  
  font-size:30px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(255,255,255,1);
}

.btn1{
  width:480px;
  height:70px;
  margin-bottom:20px;
  background-image:linear-gradient(to bottom right,rgba(83,196,254,1),rgba(73,69,248,1));
  border-radius:70px;

  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.btn1-text{
  font-size:30px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(255,255,255,1);
}
.btn2{
  width:480px;
  height:70px;
  margin-bottom:40px;
  border-width:2px;
  border-color: rgba(67,135,240,1);
  border-radius:70px;

  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.btn2-text{
  font-size:30px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(67,135,240,1);
}
</style>